ul,p{
	margin:0;
}
ul{
	padding:0;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}
body{
	background: #F4F4F4;
	min-width: 680px;
}
hr{
	height: 1px;
	background: #DDDDDD;
	border:none;
}
.header{
	position: relative;
}
.navigation{
	height: 60px;
	background: #000;
	line-height: 60px;
	a{
        color: #A7A59B;
        &:hover{
            color: #fff;
        }
    }

	 .logo{
	 	float: left;
	 	margin-left: 38px;
	 	margin-top:5px;
	 }
	 .nav_list_left{
	 	margin-left: -5px;
	 	float: left;
	 	 li{
	 	 	margin-left: 20px;
            float: left;
	 	 }
	 }
	 .nav_list_right{
	 	float: right;
	 	margin-right: 38px;
	 	li{
	 		float: right;
	 		margin-right: 20px;

	 	}
	 	.search{
	 		width: 220px;
	 		height: 30px;
	 		margin-top: 15px;
	 		background: #fff;
	 		border-radius: 5px;
	 		input{
	 			float: right;
	 			width: 172px;
	 			height: 28px;
	 			outline: none;
	 			border:0 none;
	 			line-height:28px;

	 		}
	 		img{
	 			width: 30px;
	 			height: 30px;
	 			float: right;
	 			margin-right: 10px;
	 			cursor: pointer;
	 			border:none;

	 		}
	 	}

	 }

}
.header_bg{
	  img{
	  	position: absolute;
	  	top: 0;
	  	width: 100%;
	  	height: 250px;
	  	z-index: -1;
	  }
	  .header_wr{
	  	margin:10px auto;
	  	width: 1020px;
         .small_wr{
         	height:35px;
         	line-height: 35px;

         }
         .big_wr{
         	font-size: 40px;
         	font-weight: 700;
         	line-height: 48px;
         	letter-spacing:2px;
         	color: #fff;
         }
	  }
}
.container{
	width: 1020px;
	margin: 25px auto;
	.conatainer_left{
		float: left;
		width: 680px;
		background: #fff;
		border-radius: 8px;
		.diary_title{
			padding:5px;
			margin-top: 30px;
			margin-left: 20px;
			margin-bottom: -10px;
			  p{
			  	padding-top: 5px;
			  }
			  .data{
			  	color: #BBBBC1;
			  }
			  .big_wr{
			  	font-size: 30px;
			  	font-weight: 700;
			  	font-family: '宋体';
			  	line-height: 38px;
			  	margin-bottom: 20px;
			  }
			  hr{

			  	height: 1px;
			  	border:none;
			  	background: #F4F4F4;
			  }
		}
		.left_main{
			margin-left: 12px;
			li{
				width: 100%;
				float:left;
				padding-bottom: 10px;
				padding-top: 10px;
				border-bottom: 1px solid #EEEEEE;
				img{
					float: left;
					width: 180px;
					margin:10px;
					border:1px solid #ccc;
				}
				.diary{
					margin-top: 5px;
					width: 455px;
					float: left;
					margin-left: 5px;
					.data{
						text-indent: 2em;
						line-height: 30px;
						font-size: 14px;

					}
					p{
						color: #a19b9c;
						text-indent: 2em;
						font-size: 12px;

					}
			}

			}
		}
	}
	.conatainer_right{
		float: left;
		width: 330px;
		.message_title{
			margin-top: 10px;
			height: 60px;
			img{
				float: left;
				width: 60px;
				margin-left: 10px;

			}
			p{
				float: left;
				line-height: 60px;
                font-size: 17px;
                margin-left: 5px;
                color: #fff;
                font-family: 'KaiTi_GB2312';
                cursor: pointer;
			}
			span{
				display: inline-block;
				line-height: 60px;
				float: right;
				color: #dadcdc;
				&:hover{
					color: #fff;
				}
			}

		}

	}
	.message_side{
		margin-top: 10px;
		ul{
			margin-left: 23px;
			li{
				padding: 10px 0;
				border-bottom: 1px solid #dcdcd1;
				float: left;
				img{
					width: 50px;
					border-radius: 25px;
					float: left;
					margin-top:5px;
				}
				.message_wr{
					float: left;
                    width: 245px;
                    margin-left: 10px;
                    margin-top: 5px;
                    line-height: 1.5em;
                    font-size: 12px;
                    p{
                       .username{
                    	color: #3679C6;
                       }
                       .message{
                       	color: #9c9696;
                       }
                    }
                    .message_data{
                    	color: #AAD6EA;
                        margin-top: 8px;
                    }
				}
			}
		}
	}

}

/* about me */
.about_main{
	width: 960px;
	float: left;
	margin-left: 30px;
}
  .container_about{
  	border: 30px solid #d8d3c9;
  	width: 1020px;
  	border-radius: 5px;
  	background: #b8c1c1;
  	margin:20px auto;
  	&:after{
  		content: '';
  		width: 0;
  		height: 0;
  		display: block;
  		clear: both;
  	}
  	  .about_wr,.time_experence{
        margin-top: 30px;
  	  	width: 960px;
  	  }
  	  .about_wr{
  	  	height: 230px;
  	  	background: url('../images/banner_top.jpg') no-repeat;
  	  	background-position: 96% 0;
  	  	background-size: 200%;
  	  	font-size: 12px;
  	  	text-align: center;
  	  	line-height: 2em;
  	  	color: #7d26ca;
  	  	position: relative;
  	  	p{
  	  		position: absolute;
  	  		opacity: 0;
  	  	}
  	  	.p1{
  	  		left:410px;
  	  		top: 55px;
  	  	}
  	  	.p2{
  	  		left:400px;
  	  		top:95px;
  	  	}
  	  	.p3{
  	  		left: 346px;
  	  		top: 130px;
  	  	}

  	  }
  	  .time_experence{
        height: 150px;
        position: relative;
  	  	.time_data{
  	  		width: 900px;
  	  		height: 48px;
  	  		padding-top: 18px;
  	  		li{
  	  			text-align: center;
  	  			color: #fff;
  	  			line-height: 28px;
  	  			opacity: 0;
  	  			filter:alpha(opacity=0);
  	  			float: left;
  	  			width: 88px;
  	  			height: 46px;
  	  			background: url('../images/dtime.png') no-repeat;
  	  		}
  	  		li.li1{
  	  			margin-left: 150px;
  	  		}
  	  		li.li2{
  	  			margin-left: 140px;
  	  		}
  	  		li.li3{
  	  			margin-left: 70px;
  	  		}
  	  		li.li4{
  	  			margin-left: 82px;
  	  		}
  	  		li.li5{
  	  			margin-left: 74px;
  	  		}
  	  	}
  	  	.time_axis{
  	  		position: absolute;
  	  		height: 8px;
  	  		background: #9a50dc;
  	  		float: left;
  	  		left: 30px;
  	  		top: 75px;
  	  	}
  	  	.time_style{
  	  		position: absolute;
  	  		z-index: 2;
  	  		width: 900px;
  	  		height: 28px;
  	  		top: 65px;
  	  		left: 30px;
  	  		li{
  	  			width: 16px;
  	  			height: 16px;
  	  			border:6px solid #9a50dc;
  	  			float: left;
  	  			border-radius: 16px;
  	  			background: #B8C1C1;

  	  		}
  	  		li.li1{
  	  			margin-left: 70px;
  	  		}
  	  		li.li2{
  	  			margin-left: 180px;
  	  		}
  	  		li.li3{
  	  			margin-left: 120px;
  	  		}
  	  		li.li4{
  	  			margin-left: 130px;
  	  		}
  	  		li.li5{
  	  			margin-left: 120px;
  	  		}
  	  	}
  	  	.time_wr{
  	  		position: absolute;
  	  		width: 900px;
  	  		height: 20px;
  	  		top: 105px;
  	  		left: 30px;
  	  		li{
  	  			text-align: left;
  	  			line-height: 20px;
  	  			float: left;
  	  			width: 88px;
  	  			height: 20px;
  	  			font-size: 16px;
  	  			opacity: 0;
  	  			a{
  	  			  color: #9A50DC;
  	  			}
  	  		}
  	  		li.li1{
  	  			margin-left: 60px;
  	  		}
  	  		li.li2{
  	  			margin-left: 110px;
  	  		}
  	  		li.li3{
  	  			margin-left: 48px;
  	  		}
  	  		li.li4{
  	  			margin-left: 62px;
  	  		}
  	  		li.li5{
  	  			margin-left: 48px;
  	  		}
  	  	}
  	  }
  	  .about_me{
  	  	padding-bottom: 10px;
  	  	 margin-top: 20px;
  	  	 width: 960px;
  	     .just_me{
  	  		margin-top: 5px;
  	  		width: 200px;
  	  		height: 40px;
  	  		border-left: 5px solid #9A50DC;
  	  		background: #1A6AAD;
  	  		color: #fff;
  	  		border-radius: 0  20px 20px 0;
  	  		text-align: center;
  	  		line-height: 40px;
  	  		font-size: 18px;
  	  		margin-bottom: 5px;
  	      }
  	      p{
  	      	line-height: 1.5em;
  	      	color: #9A50DC;
  	      	margin-top: 10px;
  	      	text-align: left;
  	      }
  	      a{
  	      	display: block;
  	      	height: 25px;
  	      	margin-top: 12px;
  	      	margin-bottom: 10px;
  	      }
  	  }
  }


/* message */
.container_message{
	background: #E9E9E9;
	padding-bottom: 15px;
	.message_main{
		width: 970px;
		background: #fff;
		margin:30px auto;
		padding:10px 25px;
		.message_wrap{
		  .title{
				height: 36px;
				line-height: 36px;
				text-align: left;
				border-bottom: 2px solid #DDDDDD;
		   }
		   .your_say{
		   	height: 24px;
		   	line-height:24px;
		   	font-size: 12px;
		   	margin-top: 6px;
		   	  .message_say{
		   	 	 color: #000;
		   	 	 font-weight: 700;
		       }
		   	  .editor{
		   	     color: #6AA5D8;
		   	 	 margin-left: 20px;
		   	 	 cursor: pointer;
		   	   }
		   }
		   .your_name{
		   	height: 30px;
		   	  input{
		   	  	float: left;
		   	  	height: 20px;
		   	  	margin-top: 9px;
		   	  	border:0 none;
		   	  	line-height: 20px;
                outline: none;
                border-bottom: 1px solid #ddd;
		   	  }
		   	  ul{
		   	  	float: left;
		   	  	display: inline;
		   	  	margin-left: 20px;
		   	  	 li{
		   	  	 	float: left;
		   		   	 margin-left: 8px;
		   	  	 	 img{
		   	  	 	 	width: 30px;
		   	  	 	    height: 30px;
		   	  	 	    border-radius: 15px;
		   	  	 	    cursor: pointer;
		   	  	 	    border:1px solid #B7E7FF;
		   	  	 	 }
		   	  	 }
		   	  }
		   }
		   .message_say{
		   	  width:100%; 
		   	  margin-top: 20px;
		   	  textarea{
		   	  	width: 99.5%;
		   	  	height: 180px;
		   	  }
		   }
		   .release{
		   	height: 32px;
		   	line-height: 32px;
		   	margin-top: 20px;
	   	      span{
	   	      	display: inline-block;
	   	      	height: 25px;
	   	      }
	   	      .notice{
	   	      	float: right;
	   	      	font-size: 16px;
	   	      	color: #000;
	   	      	margin-right: 15px;
	   	      }
	   	      .number{
	   	      	padding:0 5px;
	   	      	font-size: 21px;
	   	      	text-align: center;
	   	      	
	   	      }
	   	      button{
	   	      	width: 90px;
	   	      	float: right;
	   	      	margin-right: 10px;
	   	      	height: 32px;
	   	      	background: #fff;
	   	      	border:1px solid #000;
	   	      	color: #000;
	   	      	text-align: center;
	   	      	line-height: 32px;
	   	      	display: inline-block;
	   	      	cursor: pointer;
	   	      	font-size: 16px;
	   	      	font-family: 'Microsoft YaHei';
	   	      	&:hover{
	   	      		color: #fff;
	   	      		border:1px solid #fff;
	   	      		background: #000;
	   	      	}
	   	      }
		   }
		   .her_say{
		   	margin-top: 10px;
		   	font-size: 14px;
		   	font-weight: 700;
		   }
		   .message_list{
		   	 li{
		   	 	 width: 100%;
		   	 	 border-bottom: 1px solid #ddd;
		   	 	 &:after{
                   content: '';
                   width: 0;
                   height: 0;
                   display: block;
                   clear: both;
		   	 	 }

		   	 	 .item_img{
		   	 	 	 float: left;
		   	 		 width: 100px;
		   	 		 height: 100px;
		   	 		 margin:10px;
		   	 		 border-radius: 60px;
		   	 	  }
		   	 	  .message_wr{
	                 margin-left: 130px;
	                 margin-top: 10px;
	                 padding-bottom: 10px;
	                 .title_item{
	                 	height: 25px;
	                 	span{
	                 		display: block;
	                 		float: left;
	                 		height: 25px;
	                 		margin-right: 15px;
                            .title_ico{
	                 			width: 25px;
	                 			height: 25px;
	                 		}
	                 	}
	                 	i{
	                 		padding:0 5px;
	                 	}
	                 }
	                 p{
	                 	word-wrap:break-word;
	                 }
	                 .item_time{
	                 	margin-top: 10px;
	                 }
		   	 	  }
               }
		    }
	    }
	}
}
.active{
	color: #fff!important;
}
/* link.html */
.container_link{
	width: 1020px;
	height: 300px;
	margin:10px auto;
	.link_left{
		float: left;
		width: 30%;
		li{ 
			float: left;
			width: 100%;
			margin-top: 5px;
			.item_list{
				width: 100%;
				border-radius: 5px;
				border:1px solid #3E87C6;
				&::after{
					content: '';
					display: block;
					height: 0;
					width: 0;
					clear: both;
				}
				 li{
				 	color: #4B4B4B;
				 	width: 100%;
				 	line-height: 30px;
				 	line-height: 30px;
				 	float: left;
				 	font-size: 14px;
				 	text-align: center;
				 	margin-top: 0;
				 	display: none;
                    cursor: pointer;
                    &:hover{
                    	background: #ccc;
                    }
				 }
				 .link_title{
                    background: #3E87C6;
                    color: #fff;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    letter-spacing: 1px;
                    cursor: pointer;
                    &:hover{
                    	text-decoration: underline;
                    }
				 }
			}
		}
	}
	.link_right{
		width: 67%;
		float: left;
		margin-left: 3%;
		margin-top: 10px;
		.serch{
			height: 35px;
			width: 100%;
			border:1px solid #ccc;
		    border-radius: 0 5px 5px 0;
			input{
				width:70%;
				margin-left: 2%;
				height: 35px;
				border:0 none;
				outline: none;
				background: none;
			}
			span{
			    height: 35px;
			    float: right;
			    padding: 0 20px;
                text-align: center;
                line-height: 35px;
                font-size: 14px;
                background: #EBEBEB;
                box-shadow:  1px 0 1px #ccc,-1px 0 1px #ccc,0 1px 1px #ccc ,0 -1px 1px #ccc;
                cursor: pointer;

			} 
		}
		.data_link{
			margin-top: 5px;
			border:1px solid #C5D0DC;
			padding:10px;
			p{
				color: #333339;
				line-height: 1.5em;
				a{
					margin-right: 30px;
				}
			}
		}


	}
}